<template>
	<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
		<sc-form-table v-model="form.list" :addTemplate="getTemplate()" drag-sort placeholder="暂无数据" :showDelButton="true">
			<el-table-column prop="title" label="标题" width="200">
				<template #default="scope">
					<el-input v-model="scope.row.title" placeholder="标题" maxlength="80"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="optType" label="操作方式" width="150" align="center">
				<template #default="scope">
					<el-select v-model="scope.row.optType">
						<el-option label="单选" value="0"></el-option>
						<el-option label="多选" value="1"></el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="childItem" label="子项" width="400">
				<template #default="scope">
					<sc-form-table v-model="scope.row.childItem" :addTemplate="getItemTemplate()" drag-sort placeholder="暂无数据">
						<el-table-column prop="title" label="子项">
							<template #default="scope1">
								<el-input v-model="scope1.row.childTitle" placeholder="子项" maxlength="80"></el-input>
							</template>
						</el-table-column>
					</sc-form-table>
				</template>
			</el-table-column>
			<el-table-column prop="open" label="备注" align="center" type="textarea">
				<template #default="scope">
					<el-input v-model="scope.row.remark" placeholder="备注"></el-input>
				</template>
			</el-table-column>
		</sc-form-table>
	</el-form>
</template>
<script>
import {generateId}from "@/utils/util"
export default {
	props:{listData:{type:Array}
	},
	name: 'Vote Item',
	data() {
		return {
			form: {
				list: this.listData,
			},
		}
	},
	methods: {
		getItemTemplate(){
			return {childId:generateId(),childTitle: ''}
		},
		getTemplate(){
			return {itemId:generateId(),title: '',optType:'',childItem:[],remark:''}
		}
	}
}
</script>
